<template>
	<view class="app-page">
		<image class="topbg" src="/static/images/min-bg.png"></image>
		<view class="user-info">
			<view class="info">
				<image v-if="userInfo.memberAvatar " class="user-avatar" :src="userInfo.memberAvatar"
					mode="scaleToFill" />
				<image v-else class="user-avatar" src="/static/images/avatar.jpg" mode="scaleToFill" />
				<view v-if="userInfo.memberId " class="user-content">
					<view class="userName">
						你好，{{userInfo.memberNickName||userInfo.memberName}}！
					</view>
					<view class="userID">
						{{userInfo.memberId}}
					</view>
				</view>
				<view v-else class="user-content" onTap="handleLogin">
					授权
				</view>
			</view>
			<view class="data">
				<view class="li" data-navType='navigateTo' data-url="/pages/flowOrder/flowOrder" data-checkToken="1"
					onTap="handleNav">
					<image class="icon" mode="scaleToFill" src="/static/images/mine-order.png" />
					<view class="desc">
						<view class="name">订单</view>
						<view class="txt">查看我的订单</view>
					</view>
				</view>
				<view class="li" onTap="handleBuy">
					<image class="icon" mode="scaleToFill" src="/static/images/mine-money.png" />
					<view class="desc">
						<view class="name">充值</view>
						<view class="txt">
							可签借条：
							<text>{{remainingTimes}}份</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">

			<view class="item" onTap="handleNav" data-checkToken="0" data-navType='navigateTo'
				data-url="/pages/article/article?type=about&id=3">
				关于我们
				<!-- <ant-icon class="item-icon" type="RightOutline"></ant-icon> -->
				<uni-icons type="right" size="30"></uni-icons>
			</view>
			<view class="item" onTap="handleNav" data-checkToken="0" data-navType='navigateTo'
				data-url="/pages/article/article?type=userAgree&id=8">
				用户协议
				<!-- <ant-icon class="item-icon" type="RightOutline"></ant-icon> -->
			</view>
			<!--<view class="item"  data-type='userAgreement'>
	      意见与反馈<ant-icon class="item-icon" type="RightOutline"></ant-icon></view> -->
		</view>
		<view class="list">
			<view class="item contactBox" style="position:relative;">
				<contact-button tnt-inst-id="a55_t79A" scene="SCE01294123" />
				在线客服
				<!-- <ant-icon class="item-icon" type="RightOutline"></ant-icon> -->
			</view>
		</view>
		<!-- 购买签署流量弹层 -->
		<!-- <pay-flow ref="handleRef_PayFlow" onPay="handlePayFlow" /> -->
	</view>
</template>
<script>
	export default{
		data(){
			userInfo:{}
		}
	}
</script>
<style scoped lang="scss">
	.app-page {
		width: 100vw;
		min-height: 100vh;
		overflow-y: auto;
		position: relative;
		background-color: #f5f5f5;
		padding-top: 168px;
		box-sizing: border-box;

		.topbg {
			width: 100%;
			height: 503rpx;
			z-index: 1;
			position: absolute;
			left: 0;
			top: 0;
		}

		/* 用户卡片 */
		.user-info {
			width: 702rpx;
			height: 345rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			position: relative;
			z-index: 2;
			margin: 0 auto;
			padding: 0 24rpx;
			box-sizing: border-box;

			.info {
				display: flex;
				transform: translateY(-48rpx);
				padding-left: 24px;
				padding-bottom: 32rpx;
				border-bottom: 1rpx solid #f5f5f5;

				.user-content {
					padding-top: 72rpx;

					.userName {
						height: 50rpx;
						font-size: 36rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 50rpx;
					}

					.userID {
						height: 42rpx;
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 42rpx;
						margin-top: 16rpx;
					}

				}

			}

			.user-avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
				margin-right: 24rpx;
				background-color: #fff;
				box-shadow:  0 0 10rpx #ddd;
			}

		}

		.data {
			padding: 60rpx 27rpx 50rpx;
			box-sizing: border-box;
			transform: translateY(-48rpx);

			display: flex;
			align-items: center;
			justify-content: space-between;

			.li {
				flex: 1;
				display: flex;
				align-items: center;

				.icon {
					width: 70rpx;
					height: 70rpx;
					background: #fff;
					border-radius: 50%;
				}

				.desc {
					margin-left: 21rpx;
				}

				.name {
					height: 42rpx;
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
					margin-bottom: 5rpx;
				}

				.txt {
					height: 33rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 33rpx;

					text {
						color: #1677FF;
					}
				}
			}
		}

		/* 用户卡片 */

		.list {
			width: 702rpx;
			background-color: #fff;
			padding: 0 24rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			margin: 32rpx auto;

			.item {
				height: 48rpx;
				font-size: 34rpx;
				font-family: PingFangSC, PingFang SC;
				color: #333333;
				line-height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #EEEEEE;
				padding: 24rpx 0;

				.item-icon {
					color: #CCCCCC;
				}
			}

			.contactBox {
				position: relative;
			}

			.contactBox contact-button {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				z-index: 88;
			}
		}
	}
</style>